<%@page import="com.chauncy.DMS.bean.StuInfoBean"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%
	StuInfoBean stuIb = (StuInfoBean)request.getSession().getAttribute("stuIb");
	
	String sNub = stuIb.getStu_number();
	String sName = stuIb.getStu_name();
	int stuSex = stuIb.getStu_sex();
	String telephone = stuIb.getTelephone();
	String college = stuIb.getCollege();
	String major = stuIb.getStudy_major();
	String tClass = stuIb.getThe_class();
 %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
		<meta charset="UTF-8">
		<title>选择宿舍</title>
		<link rel="stylesheet" href="./layui/css/layui.css" />
		<link rel="stylesheet" href="./css/select_dorm.css" />
		<script type="text/javascript" src="./layui/layui.js" ></script>
		<script type="text/javascript" src="./jquery-3.3.1/jquery-3.3.1.js" ></script>
	</head>
		
	<body>
		<div class="container">
			<!-- 作者：1097172038@qq.com 时间：2018-09-19 描述： 联动菜单  -->
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  				<legend>选择宿舍(依据数据库 显示联动菜单)</legend>
			</fieldset>
			<div class="layui-row">
				<form class="layui-form">
					<div class="layui-form-item">
						<div class="layui-input-inline">
							<select name="buildingsList" lay-filter="buildingsList" lay-verify="required"  id="buildingsList">
								
							</select>
						</div>
						<div class="layui-input-inline">
							<select name="floorList" lay-filter="floorList" lay-verify="required"  id="floorList">
								
							</select>
						</div>
						<div class="layui-input-inline">
							<select name="dormList" lay-filter="dormList" lay-verify="required"  id="dormList">
								
							</select>
						</div>
						<div class="layui-input-inline">
							<button class="layui-btn" lay-submit="" lay-filter="Submit">
								确定
							</button>
						</div>
					</div>
				</form>
			</div>

		<script >
			//本地化数据
			var stuSex = <%=stuSex%>;
			var name = '<%=stuIb.getStu_name()%>';
			var sNub = '<%=sNub%>';
			var college = '<%=college%>';
			var major = '<%=major%>';
			var tClass = '<%=tClass%>';
			var telephone = '<%=telephone%>';
			var buildName = "";
			//根据性别显示楼栋
			function getBuildName(stuSex){
				$.ajax({
					type:"get",
					url:"selectDormServlet",
					async:true,
					data:{
						stuSex:stuSex,
						flag:"sex"
						},
					success:function(data){
						data = JSON.parse(data);
						//清空楼栋select
						$("#buildingsList").empty();
						//
						$("#buildingsList").append("<option value='请选择楼栋'>请选择楼栋</option>");
						for (var i = 0; i < data.length; i++) {
							$("#buildingsList").append("<option value='"+data[i].Buildings_number+"'>"+data[i].Buildings_number+"</option>");
						}
					}
				});
			}
			function selectDorm(data){
				$.ajax({
					type:"get",
					url:"selectDormServlet",
					async:true,
					data:{
						dormInfo : JSON.stringify(data),
						flag : 'selectDorm'
						},
						success:function(data){
						layer.msg("宿舍选择成功...正在跳转至登陆页面...");
						 setTimeout(function(){
						 	window.location.href ="./index.jsp";
						  }, 3000);
					}
				});
			}
			
			getBuildName(stuSex);
			layui.use(['element','form','jquery'],function(){
				var element = layui.element,
				$ = layui.$,
				form = layui.form;
				form.render();
				var percent = (1/2)*100;
				element.progress('isProgress',percent+'%');
				
				//监听楼栋选项select
				form.on('select(buildingsList)',function(data){
			
				//当option被选中时为楼层select添加option
				/**
					此处缺少注释
				
				*/
					if(data.value != null){
						buildName = data.value;
						//清空楼栋select
						$("#floorList").empty();
						$("#floorList").append("<option value='请选择楼层'>请选择楼层</option>");
						for (var i = 1;i < 7 ;i++) {
							$("#floorList").append("<option value='"+i+"'>"+i+"</option>");
						}	
						//重新加载form
						form.render();	
					}	
				});
				form.on('select(floorList)',function(data){
				
					if(data.value != null){
						$.ajax({
						type:"get",
						url:"selectDormServlet",
						async:true,
						data:{
							floor:data.value,
							flag:"buildName",
							buildName:buildName
						},
						success:function(data){
							data = JSON.parse(data);
							console.log(data.length);
							if(data.length > 0){
								//清空楼栋select
								$("#dormList").empty();
								//添加option
								$("#dormList").append("<option value='请选择'>请选择宿舍</option>");
								for (var i = 0; i < data.length; i++) {
									$("#dormList").append("<option value='"+data[i].Dorm_number+"'>"+data[i].Dorm_number+"</option>");
								}
							}else{
								$("#dormList").empty();
								$("#dormList").append("<option value='此楼层以住满'>此楼层以住满</option>");
							}
							form.render();	
						}
					});
					}
				});
				form.render();
				//监听form  的submit
				form.on('submit(Submit)',function(data){
				var dormInfoObject = {};
					console.log("submit content :"+JSON.stringify(data.field));
					dormInfoObject.buildingsList = data.field.buildingsList;
					dormInfoObject.dormList = data.field.dormList;
					dormInfoObject.Stu_name = name;
					dormInfoObject.Stu_number = sNub
					dormInfoObject.Stu_sex = stuSex;
					dormInfoObject.College = college;
					dormInfoObject.Study_major = major;
					dormInfoObject.The_class = tClass;
					dormInfoObject.Telephone = telephone;
				
					
					selectDorm(dormInfoObject);
					return false; //阻止form 提交
				});
					
			});
		</script>
	</body>
</html>
